<template>
  <div class="main">
    <div class="white-bg">
      <div class="w">
        <div class="lessonNav">
          <div class="kind">
            <div class="leftBox">课程分类：</div>
            <div class="kindDetails">
              <ul>
                <li v-for="(it,index) in cats" :key="index" :class="index == oneLevel ?'both':''" @click="getOneLevel(it,index)">{{ it.name }}</li>
              </ul>
            </div>
          </div>
          <div class="tag">
            <div class="leftBox">课程标签：</div>
            <div class="kindDetails">
              <ul>
                <li v-for="(it,index) in flags" :key="index" :class="index == twoLevel ?'both':''" @click="getTwoLevel(it,index)">{{ it.name }}</li>
              </ul>
            </div>
          </div>
          <div class="year">
            <div class="leftBox">建课年份：</div>
            <div class="kindDetails">
              <ul>
                <li v-for="(it,index) in years" :key="index" :class="index == yearIndex ?'both':''" @click="getYear(it,index)">{{ it }}</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="w">
      <div class="lessonName" style="padding-top: 30px">
        <div class="listBox">
          <ul>
            <router-link
              :to="{ path: 'lessonIntroduce/' + it.id }"
              v-for="(it, i) in course"
              :key="i"
            >
              <li>
                <div class="imgBox">
                  <img :src="$store.state.apiFile + it.fm" alt="" />
                </div>
                <div class="textBox">
                  <h4 class="elli">{{ it.name }}</h4>
                  <p>{{it.chapterCount}}节课 · {{it.selCount}}人在学</p>
                  <div class="schoolName">
                    <div>
                      <span v-if="it.School">{{ it.School.name }}</span>
                    </div>
                    <span>被 {{it.ref}} 次引用</span>
                  </div>
                </div>
                <span class="best" v-if="it.Cat">{{ it.Cat.name }}</span>
              </li>
            </router-link>
          </ul>
        </div>
        <Pagination ref="pagination" @parentMethod='getCourse' />
      </div>
      <div class="none" v-if='course.length == 0'>
        暂无课程
      </div>
    </div>
  </div>
</template>

<script>
import { COURSELIST,CATS,FLAGS,YEARS } from "@/api/api";
import { _axios } from "@/api/_axios";
import Pagination from '../components/Pagination.vue';
export default {
  components: {Pagination},

  data() {
    return {
      course: [],
      cats:[],
      flags:[],
      years:[],
      oneLevel:0,
      twoLevel:0,
      yearIndex:0,
      catId:'',
      flagId:'',
      year:''
    };
  },
  mounted() {
    console.log(this.$route.params)
    if(this.$route.params.id){
      this.oneLevel = this.$route.params.index + 1
      this.catId = this.$route.params.id
    }
    this.getCourse();
    this.getCats();
    this.getFlags();
    this.getYears();
  },
  methods: {
    getYear(item,index){
       this.$refs.pagination.currentPage = 1
      this.yearIndex = index
      this.year = item
      if(item == '全部'){
        this.year = ''
      }
      this.getCourse()
    },
    getOneLevel(item,index){
       this.$refs.pagination.currentPage = 1
      console.log(11111,item)
      this.oneLevel = index
      this.catId = item.id
      if(item.name == '全部'){
        this.catId = ''
      }
      this.getCourse()
    },
    getTwoLevel(item,index){
       this.$refs.pagination.currentPage = 1
      console.log(item,index)
      this.twoLevel = index
      this.flagId = item.id
      if(item.name == '全部'){
        this.flagId = ''
      }
      this.getCourse()
    },
    getCourse() {
      console.log(this.catId,this.flagId,this.year)
      _axios(
        COURSELIST,
        {
          page: this.$refs.pagination.currentPage,
          limit: this.$refs.pagination.limit,
          catId:this.catId,
          flagId:this.flagId,
          year:this.year
        },
        "get"
      ).then((res) => {
        console.log("课程", res);
        this.course = res.data;
        this.$refs.pagination.total = res.count
      });
    },
    getCats(){
      _axios(CATS,{},'get').then(res => {
        console.log('分类',res)
        res.data.unshift({
          name:'全部',
          id:''
        })
        this.cats = res.data
      })
    },
    getFlags(){
      _axios(FLAGS,{},'get').then(res => {
        console.log('标签类',res)
        res.data.unshift({
          name:'全部',
          id:''
        })
        this.flags = res.data
      })
    },
    getYears(){
      _axios(YEARS,{},'get').then(res => {
        console.log('年',res)
        res.data.unshift('全部')
        this.years = res.data
      })
    }
  },
};
</script>


<style scoped>
.white-bg {
  background-color: #fff;
}
.lessonNav {
  padding-top: 40px;
  padding-bottom: 25px;
}
.listBox{
  min-height: 350px;
}
.kind {
  font-size: 16px;
  color: #333333;
  margin-bottom: 20px;
}
.kind .leftBox {
  width: 100px;
  margin-right: 10px;
  display: inline-block;
}
.kindDetails .both {
  background: #f1f6ff;
  border-radius: 15px;
  color: #3D7EFF;
}
.kindDetails {
  display: inline-block;
  width: 1080px;
}
.kindDetails ul {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.kindDetails li {
  height: 30px;
  line-height: 30px;
  font-size: 16px;
  color: #333333;
  padding:  0 20px;
  box-sizing: border-box;
  text-align: center;
  margin:0 0px 10px 0; 
  cursor: pointer;
  
}
.kindDetails span {
  display: inline-block;
  line-height: 30px;
  margin-right: 20px;
}
.tag {
  margin-bottom: 20px;
}
.tag .leftBox {
  width: 100px;
  margin-right: 10px;
  display: inline-block;
}
.year .leftBox {
  width: 100px;
  margin-right: 10px;
  display: inline-block;
}
.none{
  width: 100%;
  height: 100px;
  line-height: 100px;
  font-size: 30px;
  text-align: center;
  color: #999;
}
</style>
